<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频作为页面背景</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -9999;
            /*在webkit内个出黑白效果*/
            /*-webkit-filter:grayscale(100%);*/
        }

        p {
            font-family:"幼圆","宋体";
            text-align: center;
            color: white;
            font-size: 100px;
            vertical-align: middle;
            /*overflow: hidden;*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        span{
            font-size: 120px;
        }

    </style>
</head>
<body>
<!--进入视频文档 autoplay-自动播放，muted-静音，loop-循环播放-->
<video autoplay muted loop>
    <source src="sea.mp4" type="video/mp4">
    <source src="sea_ogg.Ogg" type="video/ogg">
    <source src="sea_webm.webm" type="video/webm">
    您的浏览器不支持Video标签。
</video>

<p>欢迎来到<span>我的</span>海洋</p>

<script type="text/javascript">
    <!--
    var winHeight = 0;
    function findDimensions() //函数：获取尺寸
    {
        winHeight = window.innerHeight;
        //调整h1的line-height
        h1 = document.getElementsByTagName("p")[0];
        h1.style.lineHeight = winHeight - 250 + "px";
    }
    findDimensions();
    //调用函数，获取数值
    window.onresize = findDimensions;

    //控制视频播放速度 playBackRate .5 1 2 4 ....
    var video = document.getElementsByTagName("video")[0];
    video.playbackRate = 1;
    //-->
</script>
</body>
</html>